<template>
  <div class="register">
    <section class="form_container">
      <div class="manage_tip">
        <span class="title">register in here</span>
      </div>
      <el-form
        :model="registerUser"
        :rules="rules"
        class="registerForm"
        ref="registerForm"
        label-width="80px"
      >
        <el-form-item label="学号" prop="stu_id">
          <el-input
            v-model="registerUser.stu_id"
            maxlength="6"
            show-word-limit
            placeholder="请输入6位学号"
          ></el-input>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="registerUser.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="registerUser.age" placeholder="请输入年龄"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="registerUser.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerUser.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerUser.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="password2">
          <el-input v-model="registerUser.password2" placeholder="请确认密码" type="password"></el-input>
        </el-form-item>

        <el-form-item label="选择角色">
          <el-select v-model="registerUser.identity">
            <!-- ：value="1" 1是nun类型 value="1" 1是string -->
            <el-option label="学生" :value="1"></el-option>
            <el-option label="管理员" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="success"
            round
            size="medium"
            class="reg_btn"
            @click="submitForm('registerForm')"
          >注册</el-button>
          <el-button round type="danger" size="medium" @click="resetForm('registerForm')">重置</el-button>
        </el-form-item>
        <div class="tiparea">
          <p>
            已有账号？现在
            <a href="javascript:;" @click.prevent="goLogin">登录</a>
          </p>
        </div>
      </el-form>
    </section>
  </div>
</template>

<script>
import { checkReg } from "network/user.js";

import { checkAge, checkEmail,checkPassword,checkStuId } from "common/valiator.js";
export default {
  name: "Register",
  components: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerUser.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
   
    let validateStuId = checkStuId; //验证学号
    let validateEmail = checkEmail; //验证邮箱
    let validateAge = checkAge; //验证年龄
    let validatePassword = checkPassword; //验证第一次输入密码
    return {
      registerUser: {
        stu_id: "",
        age: "",
        name: "",
        email: "",
        gender: 0,
        password: "",
        password2: "",
        identity: 1
      },
      rules: {
        stu_id: [{ validator: validateStuId, trigger: "blur" }],
        age: [{ validator: validateAge, trigger: "blur" }],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ],
        email: [{ validator: validateEmail, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        password2: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // *******************************网络请求*******************************
    // *******************************逻辑处理*******************************
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import ; 引入公共css类

.register {
  position: relative;
  width: 100%;
  height: 120vh;
  background: url("~assets/img/bg.jpg") no-repeat center center;

  background-size: 100% 100%;
}
.form_container {
  width: 420px;
  /* height: 210px; */
  position: absolute;
  /* top: 10%; */
  left: 34%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  /* font-weight: bold; */
  font-size: 26px;
  color: #212121;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #c1c1c1;
}

.reg_btn {
  width: 60%;
}
.registerForm .tiparea p {
  text-align: right;
  font-size: 12px;
  /* color: #409eff; */
}
.registerForm .tiparea p a {
  /* font-size: 12px; */
  color: #409eff;
}
</style>